import React from 'react'
import ReactDOM from 'react-dom'
import { Router, Route, Link } from 'react-router'
import cn from 'classnames'
import styles from './paid.css'
console.log(JSON.stringify(styles))

class Paid extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            data: []
        }
    }

    render() {
        return (
            <div id={styles.root} className="ui container">
                <h2 className="ui center aligned icon header orange">
                    <i className={styles.beer + " bar"}></i> Paid or Free, You Are Our Hero!
                </h2>
            	<div className={styles.licenses}>

            		<div className={styles.license}>
            			<div className={styles.license_body}>
            				<div className={styles.license_title}>Free</div>
            				<ul>
            					<li><span>PNG format up to 100 px</span></li>
            					<li><span>Apps for ...</span></li>
            				</ul>
            				<div className={styles.space_filler}></div>
            				<div className={styles.license_footer}>
        						<div className={cn(styles.license_price_item, styles.buy_for, styles.how_on_mobile)}>
        							<span>Get</span>
        						</div>
            			    </div>
                        </div>
            		</div>

                    <div className={styles.license + " " + styles.order_0}>
            			<div className={styles.license_body}>
            				<div className={styles.license_title}>All 24,300 Icons</div>
            				<ul>
            					<li><span>Lifetime access to 24,300 Icons</span></li>
            					<li><span>Any size and format</span></li>
            					<li><span>Apps for mac windows</span></li>
            					<li><span>No linking required</span></li>
            				</ul>
            				<p>Advanced Features</p>
            				<ul>
            					<li><span>Effects</span></li>
            					<li><span>Generating fonts and SVG sets</span></li>
            					<li><span>Recoloring vector icons</span></li><li><span>Generating HTML snippets</span></li>
            				</ul>
            				<div className={styles.license_footer}>
        						<div className={cn(styles.license_price_item,styles.how_on_mobile,styles.buy_for)}>
        							<span>Buy for <span className={styles.license_price_value}>$249</span></span>
        						</div>
            				</div>
            			</div>
            		</div>

                	<div className={styles.license}>
                		<div className={styles.license_body}>
                			<div className={styles.license_title}>Pay per Icon</div>
                			<ul>
                				<li><span>Any size and format</span></li>
                				<li><span>Apps for ...</span></li>
                				<li><span>Buy now, download anytime</span></li>
                				<li><span>No linking required</span></li>
                			</ul>
                			<div className={styles.space_filler}></div>
                			<div className={styles.license_footer}>
                				<div className={styles.license_price_item + " " + styles.hover}>
                					<div className={styles.license_price_product}>7 icons</div>
                					<div className={styles.license_price_discount + " " + styles.accent}>Save 17%</div>
                					<div className={styles.license_price_value}>$29</div>
                					<div className={cn(styles.license_price_hover, styles.hort)}>Buy</div>
                				</div>
                			</div>
                		</div>
            	    </div>

                </div>
            </div>
        )
    }
}

export default Paid
